<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框</title>
    <style>
        .solid {
            width: 300px;
            height: 200px;
            /*  border-style 边框样式，solid 实线边框 */
            border-style: solid;
            /* border-width  边框的粗细，一般情况都用px */
            border-width: 5px;
        }
        .dashed {
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: dashed;
            /* dashed  虚线边框 */
            border-color: skyblue;
        }
        .dotted {
            width: 300px;
            height: 200px;
            border-width: 5px;
            border-style: dotted;
            /* dashed  点线边框 */
        }
        .border {
            width: 300px;
            height: 200px;
            /* 边框的复合写法，没有顺序 */
            border:3px solid blue;
        }
        .top {
            width: 300px;
            height: 200px;
            /* 边框分开写法  */
            border-top: 2px dashed red;    /*  上边框 */
            border-bottom: 10px dashed purple;     /*  下边框 */
        }
        .test {
            width: 200px;
            height: 200px;
            /* 过于复杂
            border-top: 5px solid red;
            border-left: 5px dashed blue;
            border-right: 5px dashed blue;
            border-bottom: 5px dashed blue; */

            /* 层叠性   只是层叠了上边框，下面两条代码的顺序不能乱 */
            border: 5px solid blue;
            border-top: 5px dashed red;
        }
    </style>
</head>
<body>
    <div class="solid"></div>
    <div class="dashed"></div>
    <div class="dotted"></div>
    <div class="border"></div>
    <div class="top"></div>
    <div class="test"></div>
</body>
</html>